<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>跳动的心</title>

    <style>

        *
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            background-color: pink;
            display: flex; /*将body变成弹性容器,使body的子元素红方块可以通过Flexbox属性快速实现水平和垂直居中*/
            justify-content: center; /*水平方向居中摆放*/
            align-items: center; /*竖直方向居中摆放*/
            min-height: 100vh; /*body的高度至少是整个浏览器视口的高度 */ /*如果body内容更多,body高度可以更高 */
        }

        .红方块 
        {
            width:200px;
            height: 200px;
            background-color: red;
            position: relative;
            transform: rotate(45deg); /*旋转45度*/
            animation: 心跳 1s infinite alternate;
            box-shadow: 0px 0px 30px red;
        }

        .红方块::before  /*黄方块*/
        {
            content: ""; /*必须配合content属性,即使内容为空也必须写,否则伪元素不会显示。*/
            width:200px;
            height: 100px;
            /*background-color: yellow;*/
            background-color: red;
            position: absolute;
            top:-100px;
            border-radius: 100px 100px 0px 0px; /*将黄方块变成黄半圆*/
            /*圆角半径100px=元素高度100px,且宽度是高度的两倍200px,形成完美半圆*/
            box-shadow: 0px 0px 30px red;
        }

        .红方块::after /*蓝方块*/
        {
            content: "";/*必须配合content属性,即使内容为空也必须写,否则伪元素不会显示。*/
            width:100px;
            height: 200px;
            /*background-color: blue;*/
            background-color: red;
            position: absolute;
            left: -100px;
            border-radius:100px 0px 0px 100px; /*将蓝方块变成蓝半圆*/
            box-shadow: 0px 0px 30px red;
        }

        @keyframes 心跳
        {
            0%
            {
                transform: rotate(45deg) scale(0.6);
            }

            100%
            {
                transform: rotate(45deg) scale(1.4);
            }
        }

    </style>

</head>

<body>

    <div class="红方块"> </div>
    
</body>

</html>